<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div id="main" style="width: 100%;height: 300px;"></div>
	</body>
	<script src="js/echarts.js"></script>
	<script src="js/vue.js"></script>
	<script src="js/jquery1.42.min.js"></script>
	<script>
		var vue_obj=
			new Vue({
		        el: '#main',
		        data: {
		        	yData:[],
		        	couldData:[],
		        	noCouldData:[]
		        },
		        mounted:function(){
		        	
		        },
		        methods:{
		        	getData:function(){
		        		$.getJSON('js/test.json',function(res){
//		        			var arr=[]
		        			
			        		$.each(res.charts,function(i,v) {
//			        			var json={};
			        			vue_obj.yData.push(v.name);
//			        			json.name=v.name;
			        			if(v.ignored == 'ENABLE'){
//			        				json.couldData=0;
//			        				json.noCouldData=v.gains;
			        				vue_obj.couldData.push(0);
			        				vue_obj.noCouldData.push(v.gains);
			        			}else{
//			        				json.couldData=v.gains;
//			        				json.noCouldData=0;
			        				vue_obj.couldData.push(v.gains);
			        				vue_obj.noCouldData.push(0);
			        			}
//			        			arr.push(json);
			        		});
//			        		console.log(JSON.stringify(arr));
//			        		console.log(JSON.stringify(vue_obj.noCouldData));
//			        		console.log(JSON.stringify(vue_obj.couldData));
			        		var myChart = echarts.init(document.getElementById('main'));
							var option = {
								color:['#174775','#c2c2c2'],
								legend: {
									data: ['可控', '不可控'],
								},
								tooltip: {},
								dataZoom: [{
										type:'slider',
										left: "92%",
										show: true,
										yAxisIndex: 0,
										start:20,
										end:60
									},
									{
								        type: 'inside',
								        yAxisIndex: 0,
								        start: 20,
								        end: 60
								    }
								],
								xAxis: {
									type: 'value'
								},
								yAxis: {
									type: 'category',
									triggerEvent: "true",
									data: vue_obj.yData
								},
								series: [
									{
										name: '可控',
										type: 'bar',
										data: vue_obj.couldData
									},
									{
										name: '不可控',
										type: 'bar',
										data: vue_obj.noCouldData
									},
									{
										type: "line",
										name: "当前选择",
										markLine: {
											silent: true,
											data: [{
												yAxis: res.charts[res.charts.length-1].name
											}]
										}
									},
								]
							}
							myChart.setOption(option);
							var triggerAction = function(action, selected) {
						        legend = [];
						
						        for ( name in selected) {
						            if (selected.hasOwnProperty(name)) {
						                legend.push({name: name});
						            }
						        }
						
						        myChart.dispatchAction({
						            type: action,
						            batch: legend
						        });
						    };
						
						    var isFirstUnSelect = function(selected) {
						
						        var unSelectedCount = 0;
						        for ( name in selected) {
						            if (!selected.hasOwnProperty(name)) {
						                continue;
						            }
						
						            if (selected[name] == false) {
						                ++unSelectedCount;
						            }
						        }
						        return unSelectedCount==1;
						    };
						
						    var isAllUnSelected = function(selected) {
						        var selectedCount = 0;
						        for ( name in selected) {
						            if (!selected.hasOwnProperty(name)) {
						                continue;
						            }
						
						            // 所有 selected Object 里面 true 代表 selected， false 代表 unselected
						            if (selected[name] == true) {
						                ++selectedCount;
						            }
						        }
						        return selectedCount==0;
						    };
						
						    myChart.on('legendselectchanged', function(obj) {
						        var selected = obj.selected;
						        var legend = obj.name;
						
						        // 使用 legendToggleSelect Action 会重新触发 legendselectchanged Event，导致本函数重复运行
						        // 使得 无 selected 对象
						        if (selected != undefined) {
						
						            if (isFirstUnSelect(selected)) {
						                triggerAction('legendToggleSelect', selected);
						            } else if (isAllUnSelected(selected)) {
						                triggerAction('legendSelect', selected);
						
						            }
						        }
						
						    });
			        	})
	        		}
		        }
	        })
			vue_obj.getData();
	</script>
</html>
